<template>
	<div id="waits">
		<div class="waits_top">
			<i class="el-icon-arrow-left" ></i>
			<span @click="goBack" class="waits_top_btn">返回</span>
			<span class="waits_top_title">待办待阅</span>
		    <i class="el-icon-search" ></i>
		</div>
		
		<div class="weui-navbar">
                <div class="weui-navbar__item">
                  	<p style="margin-left: 0.05rem;">
	                    <span style="font-size: 0.15rem;"><router-link to="Waits" style="color: black;">待办</router-link>&nbsp;(</span>
	                    <span style="font-size: 0.15rem;">7</span>
	                    <span style="font-size: 0.15rem;">)</span>
                    </p>
                </div>
                <div class="weui-navbar__item" id="active">
                   	<p>
                  		<span style="font-size: 0.15rem;"><router-link to="Waitwatch" style="color: lightblue;">待阅</router-link>&nbsp;(</span>
                  		<span style="font-size: 0.15rem;">45</span>
                  		<span style="font-size: 0.15rem;">)</span>
                  	</p>
                </div>
                <div class="weui-navbar__item">
                   	<p>
                  		<span style="font-size: 0.15rem;"><router-link to="Reads" style="color: black;">已阅</router-link>&nbsp;(</span>
                  		<span style="font-size: 0.15rem;">45</span>
                  		<span style="font-size: 0.15rem;">)</span>
                  	</p>
                </div>
            </div>
		<div class="waits_bd">
            <div class="weui-tab__panel">
				<div class="weui-tab__panel_wait">
					
				</div>
            </div>
		</div>
	</div>
</template>
<script type="text/javascript">
    $(function(){
        $('.weui-navbar__item').on('click', function () {
            $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
        });
    });
</script>
<script>
export default {
	  name: 'waits',
	  data () {
	    return {
	    	
	    		
	    }
	  },
	  methods:{
	 	goBack(){
	 		 history.back(-1);
	 	}
      }
	  
	}
</script>

<style>
	#waits{
		width: 100%;
		height: 100%;
		
	}
	.waits_top{
		width: 100%;
		height: 0.5rem;
		display: flex;
		position: fixed;
		z-index: 900;
		top: 0;
		background-color: white;
		border: 0.01rem solid  gainsboro;
		border-top: none;
		border-left: none;
		border-right: none;
		
	}
	.el-icon-arrow-left{
		font-size: 0.25rem;
		margin-left: 0.1rem;
		margin-top: 0.1rem;
		color: lightblue;
	}
	
	.waits_top_btn{
		/*width:60px;*/
		/*font-size: 1px;*/
		color: lightblue;
		display: block;
		font-size: 0.15rem;
		margin-top: 0.1rem;
	}
	
	.waits_top_title{
		font-size: 0.2rem;
		color: black;
		display: block;
		margin-left: 0.8rem;
		margin-top: 0.05rem;
		font-weight: bold;
	}
	
	.el-icon-search{
		font-size: 0.25rem;
		margin-top: 0.05rem;
		margin-left: 1.1rem;
		margin-top: 0.1rem;
		color: lightblue;
	}
	.weui-navbar{
		/*background-color: gold;*/
		position: fixed;
		width: 100%;
		height: 0.6rem;
		z-index: 900;
		/*margin-top:0.5rem;*/
	}
	#active{
		color: lightblue;
		background-color: white;
		border: solid 0.01rem lightblue;
		border-top: none;
		border-left: none;
		border-right: none;
		
	}
	/*主体*/
	.waits_bd{
		width: 100%;
		/*height: 100%;*/
		/*position: fixed;
		z-index: 666;*/
		margin-top: 0.51rem;
		background: #f1f1f1;
	}
	.weui-navbar{
		height: 0.5rem;
		border: 0.01 solid gainsboro;
		border-left: none;
		border-right: none;
		border-bottom: none;
	}
	
	.weui-tab__panel_wait{
		width: 100%;
		margin-top: 0.6rem;
	}
	
</style>